<template>
  <div>
    <h1>App</h1>

    <n-button>naive-ui</n-button>
    <n-button type="primary">Primary</n-button>
    <n-button type="info">Info</n-button>
    <n-button type="success">Success</n-button>
    <n-button type="warning">Warning</n-button>
    <n-button type="error">Error</n-button>

    <n-button @click="fn1">基础语法</n-button>


    <n-input v-model:value="inputValue" />
    <n-button @click="fn2">新增一项Todo</n-button>
    <n-button @click="fn3">删除一项，id=2</n-button>

    <n-button @click="fn4">用instance发请求</n-button>
  </div>
</template>

<script>
// 按需引入， 要什么就引入什么， 然后下面做好注册
import { NButton } from 'naive-ui'

// 引入axios   
import axios from "axios";
// 创建一个axios实例
const instance = axios.create({
  // 设置好一些默认值，后续的请求就不需要再传这些值了
  baseURL: "http://localhost:3000",

})


export default {
  data() {
    return {
      inputValue: "",
    }
  },
  methods: {
    fn1() {
      // 1. 基础语法 axios(config)
      // axios({
      //   url: "http://localhost:3000/todos", //请求地址
      //   method:"get", //请求方式默认是get
      // }).then((response) => {
      //   // 注意：response 是一个Response包装对象，里面的data属性才是真正的接口响应数据
      //   console.log("response：",response);
      //   console.log("data",response.data);
      // });

      // 2. axios(url,config)  config可不写(会默认是get)
      // axios("http://localhost:3000/todos").then((response) => {
      //   console.log(response.data)
      //   });
      axios("http://localhost:3000/todos").then(response => console.log(response.data));
    },

    fn2() {
      // 调用接口，将输入框的值新增到后台
      // 1. axios(url,config) 
      // axios("http://localhost:3000/todos",{
      //   method:"post",
      //   // 请求体
      //   data:{
      //     title:this.inputValue,
      //     completed:false,
      //   },
      // }).then(response => console.log(response.data)); 

      // 2.axios.post(url,data,config)
      axios.post("http://localhost:3000/todos", {
        title: this.inputValue,
        completed: false,
      }).then(response => console.log(response.data));
    },

    fn3() {
      // 1.axios(url,config)
      // axios("http://localhost:3000/todos/2",{  // 在地址后拼接上id
      //   method:"delete",
      // }).then(response => console.log(response.data))
      // 2.axios.delete(url,config)
      axios.delete("http://localhost:3000/todos/1").then(response => console.log(response))
    },
    fn4() {
      // 创建出来的instance 实例，和axios的用法一样
      // 请求url地址，如没有协议开头那么会拼接上instance的baseURL，http://localhose:3000/todos
      instance("/todos").then(response => console.log(response.data));
    },
  },

  // // 注册组件  安装了自动引入的插件之后，就不需要像这样注册插件了，直接在模板里使用就可
  // components: {
  //   NButton,
  // }
}

</script>
